import React, { useState, useEffect, useReducer } from 'react'
import { TextContext } from './utils/Context'
import Nav from './components/Nav'


export const reducer = (state, action) => {
  const { type } = action

  if (type === 'changeStoretitle') {
    return {
      ...state,
      storeTitle: action.title
    }
  }

  return state
}

export const initalState = {
  storeTitle: '存在与store中的title'
}


export default function App() {
  const [title, setTitle] = useState('1906A')

  const [isShow, setIsShow] = useState(false)

  const [state, dispatch] = useReducer(reducer, initalState)

  useEffect(() => {
    console.log('触发')
  }, [title, isShow, state])


  return (
    <TextContext.Provider value={{ title, state, dispatch}}>
      {title}
      <p>
        {state.storeTitle}
      </p>

      <Nav />
      <button onClick={() => setTitle('八维')}>修改title</button>
      <button onClick={() => setIsShow(!isShow)}>修改isShow</button>
      <button onClick={() => dispatch({type: 'changeStoretitle', title: '哈哈哈'})}>更改StoreTitle</button>
    </TextContext.Provider>
  )
}
